<template>
  <div>
    <!--顶部导航栏-->
    <div class="homeNav">
      <div class="local" >广州</div>
      <div class="link">
        <router-link to="/home/playing">正在热映</router-link>
        <router-link to="/home/comming">即将上映</router-link>
      </div>
      <i><img src="../img/fangdajing.png"/></i>
      <div class="clear"></div>
    </div>

     <!--底部导航栏-->
     <!-- <div class="nav-buttom">
     	<div class="wode"><i class="iconfont icon-dianying" ></i><p>电影</p></div>
     	<div class="dianying"><i  class="iconfont icon-wode"></i><p>影院</p></div>
     	<div class="yingyuan"><i class="iconfont icon-yingyuan"></i><p>我的</p></div>
     </div> -->
  

    <!-- home下的子路由  children -->
    <router-view />


  </div>
</template>
	
	<script type="text/javascript">
		import '../scss/home.scss';  
		   export default {

		   }
		
	</script>
<style lang="scss" >
.homeNav{
	position:fixed;
	top: 7%;
  width: 100%;
  display: flex;
  line-height:52px;
  background-color: white;
	border-bottom: 1px solid gainsboro;
			align-items: center;
			z-index: 10;
  .local{
    width: 62px;
  }
  .link{
    display: flex;
    width:70%;
    a{
    	width: 100%;
    	text-decoration: none;
    	 
    font-weight: bold;
    color: #2c3e50;
    &.router-link-active,&.router-link-exact-active {
      color: #42b983;
    }
    
    }

   
  }
   i{
    	display: inline-block;
        float: right;
    	padding-top: 4px;
    	img{
    		width:51%;
    	}
    }
    .clear{
    	display: block;
    }
}

.nav-buttom{
	width: 100%;
	position: fixed;
	bottom: 0;
	    background: #fff;
    border-top: .5px solid #d8d8d8;
	.wode{
		display: inline-block;
		width: 30%;
		i{
			font-size: 29px;
		}
		p:nth-of-type(1){
			font-size: 12px;
		}
		
	}
	.dianying{
		display: inline-block;
		width: 30%;
		i{
			font-size: 29px;
		}
		p:nth-of-type(1){
			font-size: 12px;
		}
	}
	.yingyuan{
		display: inline-block;
		width: 30%;
		i{
			font-size: 29px;
		}
		p:nth-of-type(1){
			font-size: 12px;
		}
	}
}
</style>

